<template>
  <div class="seckillall">
    <div class="head">
      <div class="end">
        <el-table
          :data="tableData"
          row-key="menuId"
          style="width: 100%"
        >
          <el-table-column label="序号" prop="index">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column property="menuName" label="菜单名称" />icon

          <el-table-column property="menuIcon" label="图标" />
          <el-table-column property="menuUrl" label="路径" />
          
        </el-table>
        <div style="margin-left: 600px">
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Calendar, Search, Edit, Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {
  selectMenu,
} from "@/api/user";

//选择框
const total = ref(10);

onMounted(async () => {
  await getMenuList();
});
//查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
});
// 表单参数
var formData = ref({
  menuId: "",
  menuName: "",
  menuIcon: "",
  menuUrl: "",
  menuStatus: "",
});
//表格参数
const tableData = ref([]);

//每页条数变换
function handleSizeChange(val) {
  queryParams.value.pageSize = val;
  queryParams.value.pageNum = 1;
  getMenuList();
}
//每码变换
function handleCurrentChange(val) {
  queryParams.value.pageNum = val;
  getMenuList();
}


async function getMenuList() {
 
  try {
    const res = await selectMenu(queryParams.value);
    total.value = res.data.menu.total
    tableData.value = res.data.menu.records;
  
  } catch (error) {
    console.log(error);
  }
}


</script>

<style scoped>
.seckillall {
  height: 100%;
  width: calc(100% - 50px);
  /* background-color: pink; */
  float: left;
}

.head {
  margin-top: 20px;
  margin-left: 20px;
  width: calc(100% - 50px);
}

.middle {
  width: 100%;
  height: 8vh;
  margin-bottom: 20px;
}

.add {
  margin-top: 15px;
  margin-left: 45px;
  width: 5%;
  height: 50%;
  float: left;
}

.end {
  float: left;
  width: calc(100% - 50px);
}
</style>